<template>
	<view style="position: relative;display: flex;flex-direction: column;">
		<view style="margin: 0;overflow:hidden">
			<image :src="img" mode="" style="height: 370.31rpx;width: 750rpx;padding: 0;margin: 0;vertical-align:bottom;"></image>
		</view>
		<view style="width: 750rpx;background: #FFFFFF;padding: 36rpx 0;">
			<view style="display: flex;align-items: center;height: 35.83rpx;">
				<view style="margin-left:38.64rpx;letter-spacing: 1rpx;font-weight: bold;position: relative;left: -10rpx;" :class=" wenzi_len ? 'colo_se' : 'colo_yan'">
					<text>【{{kecheng_num}}节】</text>
					<text>{{title}}</text>
				</view>
				<view style="border: 1px solid #FF7300;color:#FF7300;font-size: 22.12rpx;border-radius: 25rpx;height: 32.83rpx;line-height:32.83rpx ;margin:5rpx 0 0 60rpx;padding: 5rpx 15rpx;text-align: center;">{{lable}}</view>
			</view>
			<view style="display: flex;margin-left:38.84rpx ;padding: 0;margin: 20rpx 0 10rpx 40rpx;align-items: center;" >
				<view style="font-size: 31.4rpx;color: #FF3737;font-weight: bold;" >
					<text style="font-size:25rpx;">￥</text>
					<text style="font-size:40rpx;margin: 0 5rpx;">{{default_discount_price}}</text>
				</view>
				<view :class="isshow? 'panduan' :'panduan'" style="margin:0 25rpx ;position: relative;top: -1rpx;">
					<text style="font-size:25rpx;">￥</text>
					<text style="margin: 0 5rpx;">{{amout}}</text>
				</view>
				<view style="font-weight: bold;" :class="isshow? 'panduan' :'zhengchang'" v-if="original_price != 0">
					<text style="font-size: 25rpx;">￥</text>
					<text style="margin: 0 5rpx;font-size:40rpx;">{{original_price}}</text>
					<text style="font-size:25rpx;">/ 节</text>
				</view>
			</view>
			<view style="padding: 0 27.18rpx 0 40rpx;display: flex;justify-content: space-between;font-size: 24.15rpx;color: #FF7300;height: 36.24rpx;align-items: center;margin-top: 20rpx;">
				<view style="display: flex;">
					<view v-for="(itme,index) in activity_list" :key="index">
						<view v-if="itme.tags == '单节支付'">
							<image :src="danjie_img" class="img_huo"></image>
						</view>
						<view style="margin-left: 10rpx;" v-if="itme.tags == '拼团'">
							<image :src="pingtuan_img" class="img_huo"></image>
						</view>
						<view style="margin-left: 10rpx;color: #FFFFFF;background: red;font-size: 25rpx;text-align: center;line-height: 50rpx;border-radius: 30rpx;" v-if="itme.tags == '新春'" class="img_huo">新春活动</view>
					</view>
				</view>
				<view style="color: #BEBEBE;font-size: 24.15rpx;height:28.15rpx ;">已售{{num}}</view>
			</view>
		</view>
		<view style="margin: 10rpx 0 0 0;" v-if="isxinchun" @tap="go_xinchuan">
			<image :src="xinchun_img" style="width: 694rpx;height: 131rpx;margin-left: 27rpx;" @tap="xinchun"></image>
		</view>
		<view style="background: #FFFFFF;box-sizing: border-box;padding: 35rpx 34rpx 40rpx 29rpx ;width: 750rpx;" v-if="jigou_xiang != ''" @tap="gojifou">
			<view style="font-size:35.58rpx ;font-weight: bold;color: #373737;margin-bottom: 23rpx;">培训机构</view>
			<view style="display: flex;align-items: center;background: #F5F5F5;padding: 15rpx;border-radius: 18rpx;">
				<view>
					<image :src="jigou_xiang.mechanism_logo" style="width: 122.56rpx;height: 122.56rpx;border-radius: 50%;"></image>
				</view>
				<view style="font-size:28rpx ;color: #373737;margin-left: 30rpx;">
					<view style="font-size:35rpx;font-weight: bold;margin-bottom: 2rpx;">{{jigou_xiang.mechanism_name}}</view>
					<view>{{jigou_xiang.mechanism_addr}}</view>
				</view>
			</view>
		</view>
		<view style="background: #FFFFFF;box-sizing: border-box;padding: 34rpx 34rpx 34rpx 29rpx ;width: 750rpx;margin:30rpx 0;">
			<view style="font-size: 35.58rpx;color: #373737;font-weight: bold;margin-bottom:25rpx ;">课程详情</view>
			<view style="padding: 15rpx;border-radius: 18rpx;color: #292929;">
				<view style="font-size:28rpx ;letter-spacing: 2rpx;letter-spacing: 2rpx;margin-bottom: 8rpx;color: #292929;" >
					<p>{{introduction_content}}</p>
				</view>
			</view>
			<view  class="list">【市场套餐价: {{ default_discount_price != 0 ? default_discount_price : amout }}】</view>
		</view>
		<view style="margin-bottom: 10rpx;">
			<view v-for="(itme,index) in photoData" :key="index" style="margin-bottom: 15rpx;">
				<image  mode="widthFix" :src="itme" style="width: 750rpx;vertical-align: bottom;" @tap="yuelan(index)"></image>
			</view>
		</view>
		<view style="position: fixed;bottom: 0rpx;width: 750rpx;box-sizing: border-box;padding: 10rpx  56.172rpx 40rpx 56.172rpx;z-index: 121212;display: flex;align-items: center;background: #FFFFFF;">
			<view style="display: flex;align-items: center;" @tap="tiaozhuan">
				<image :src="img_" style="width: 33rpx;height: 33rpx;vertical-align: center;"></image>
				<view style="font-size: 29rpx;color: #FF7300;position: relative;top: -5rpx;left: 5rpx;">咨询</view>
			</view>
			<view style="margin-left: 10rpx;" v-if="user_id !== ''">
				<view style="width: 531rpx;height: 85.76rpx;background: transparent;display: flex;justify-content: space-between;" v-if="!curriculumType">
					<view class="cocc_" v-if="original_price != 0" @tap="jiaofu_" style="background: #FFCC00;">
						<image :src="hei" class="list_img"></image>
						单节付报名
					</view>
					<view :class="original_price === 0 ? 'cocc' : 'cocc_'" @tap="lis">
						<image :src="tupian_l" class="list_img"></image>
						立即购买
					</view>
				</view>
				<view class="cocc" v-if="curriculumType" @tap="purchaseCar">
					立即购买
				</view>
			</view>
			<view style="margin-left: 10rpx;" v-if="user_id == ''">
				<view class="cocc" v-if="curriculumType" @tap="loginFun">
					立即登录
				</view>
			</view>
		</view>
		<view style="background: #FFFFFF;padding: 30rpx;margin-bottom: 210rpx;box-sizing: border-box;width: 695rpx;margin-left: 28rpx;border-radius: 18rpx;">
			<view style="font-size: 30rpx;font-weight: bold;margin-bottom: 10rpx;">课程评价</view>
			<view style="font-size: 25rpx;font-weight: bold;margin-top: 10rpx;" v-if="pinglun_list.length == 0">暂无评论</view>
			<view v-for="(itme,index) in pinglun_list" :key="index" style="margin-bottom: 40rpx;background: #FFFFFF;">
				<view style="display: flex;align-items: center;margin-bottom: 20rpx;">
					
					<view>
						<image :src="itme.map.userinfo.avatar" style="width: 80rpx;height: 80rpx;border-radius: 50%;border: 1rpx solid #DCDCDC;"></image>
					</view>
					<view style="margin-left: 30rpx;position: relative;top: -5rpx;">
						<view style="display: flex;align-items: center;">
							<view style="font-size: 25rpx;">{{itme.map.userinfo.nick_name}}</view>
							<view>
								<van-rate :value="itme.average_score"></van-rate>
							</view>
						</view>
						<view style="font-size: 25rpx;color: #FF7300;">{{itme.create_time}}</view>
					</view>
				</view>
				<view style="font-size: 25rpx;margin-bottom: 25rpx;">{{itme.content}}</view>
				<view style="display:flex ;flex-wrap: wrap;margin-left: 35rpx;">
					<view style="height: 150rpx;width: 150rpx;margin-right: 52rpx;margin-bottom: 50rpx;" v-for="(it,indexs) in itme.photo" :key="indexs">
						<image :src="it" style="width: 150rpx;height: 150rpx;border-radius: 20rpx;border: 1rpx solid #DCDCDC;" @tap.stop="gokan(itme.photo,indexs)"></image>
					</view>
				</view>
				<view style="height: 2rpx;width: 100%;background: #F5F5F5;margin: 10rpx 0;"></view>
			</view>
		</view>
		<van-popup position="center" :show="list_show" custom-style="background:transparent" overlay z-index="12121">
			
		</van-popup>
	</view>
</template>
<script>
	export default {
		onShareAppMessage(res) {
		    if (res.from === 'menu') {// 来自页面内分享按钮
		      console.log(res.target)
		    }
		    return {
		      title: '课程详情',
		      path: '/pages/World/classChannel/classChannel?curriculumId=' + this.curriculumId
		    }
		  },
		data() {
			return {
				kecheng:"",
				img:"",
				title:"",
				lable:"",
				money:"",
				num:"",
				teater:[],
				content:"",
				l:[],
				user_id:"",
				course_num:"",
				master_id:"",
				id:"",
				opn:"",
				shuju:{},
				jigou_xiang:{},
				mechanism_id: "",
				img_list: [],
				kecheng_num: "",
				jigou_list: [],
				panduan_goumai: 1,
				ziji_jigou_id: "",
				amout: "",
				content_list:[],
				img_list_bao: "http://img.curiousmore.com/413508",
				img_list_liao: "http://img.curiousmore.com/51320",
				chahao: "http://img.curiousmore.com/225585",
				shangmian: "http://img.curiousmore.com/869685",
				xiamian: "http://img.curiousmore.com/1133",
				bgColor: "transparent",
				maskAlpha: 0.7,
				num_list: 12121,
				tupian: "http://img.curiousmore.com/896133",
				tupian_: "http://img.curiousmore.com/110966",
				shuju_kecheng: {},
				pinglun_list: [],
				currentPage: 1,
				ping: 1,
				price: "",
				isshow: false,
				list_show: false,
				img_: "http://img.curiousmore.com/99146",
				list_show_xia: false,
				round: true,
				ans_name: "http://teachpaydownload.huihejituan.com",
				list_toto: false,
				erwei: "http://img.curiousmore.com/827922",
				danjie_img: "http://img.curiousmore.com/450973",
				pingtuan_img: "http://img.curiousmore.com/172161",
				xianshi_img: "http://img.curiousmore.com/307599",
				original_price: "",
				tupian_l: "http://img.curiousmore.com/603975",
				hei: "http://img.curiousmore.com/61645414272",
				wenzi_len: false,
				activity_list: [],
				xinchun_img: "http://img.curiousmore.com/584050",
				isxinchun: false,
				dui_obj: {},
				default_discount_price: "",
				baobao_shuju: {},
				introduction_content: "",
				curriculumId: "",
				curriculumType: false,
				photoData: []
			}
		},
		methods:{
			
			// 跳转到登录页面
			loginFun() {
				uni.reLaunch({
					url:'/pages/tabBer/login/logins'
				})
			},
			
			activityPurchaseRequest() {
				uni.login({
					success: res => {
						this.$myRequest({
							url: "/pay/payPre",
							data: {
								user_id: this.user_id,
								rcharge_type: "coupon_177",
								source: "teach_paypal",
								rcharge_abstract: "活动券购买",
								pay_type: "wx",
								rcharge_valid: res.code,
							},
							header: {
								'content-type' : 'application/json'
							},
							methed: "post"
						}).then((val) => {
							if(val.code == 0){
								let data = val.data
								uni.requestPayment({
								    provider: 'wxpay',
								    timeStamp: data.timeStamp,
								    nonceStr: data.nonceStr,
								    package: data.package,
								    signType: 'MD5',
								    paySign: data. paySign,
								    success: function (res) {
								        uni.showToast({
								        	title: "支付成功"
								        })
										uni.reLaunch({
											url:"/pages/Friend/hudong/hudong"
										})										
								    },
								    fail: function (err) {
								        uni.showToast({
								        	title: "取消支付",
											icon: "none"
								        })
								    }
								});
							}
						})
					}
				})
			},
			
			// 优惠券购买
			discountFun() {
				let me = this
				me.$myRequest({
				 	url: "/userCoupon/queryListPage",
				 	data: {
				 		user_id: me.user_id,
				 		pageSize: 1,
				 		currentPage: 1,
				 		status: 1,
				 		is_teach_paypal: true,
				 		type: "voucher_redemption"
				 	}
				 }).then((res) => {
				 	me.$myRequest({
				 		url: "/userCoupon/insertStudyCardByCoup",
				 		methed: "post",
				 		header: {
				 			'content-type' : 'application/json'
				 		},
				 		data: {
				 			id: res.data[0].id,
				 			master_set_price_id: Number(me.id),
				 			user_id: me.user_id
				 		}
				 	}).then((res_) => {
						if(res_.code !== 0){
							uni.showToast({
								title: res_.message,
								icon: "none"
							})
						}else {
							uni.reLaunch({
								url:"/pages/Meet/userList/userList"
							})
						}
				 	})
				 })
			},
			
			// 天赋课程购买函数
			purchaseCar() {
				this.detailsList()
				
			},
			
			go_xinchuan() {
				uni.navigateTo({
					url: "/pages/Meet/CreateClass/CreateClass"
				})
			},
			
			detailsList() {
				let me = this
				this.$myRequest({
					url: "/userCoupon/queryListPage",
					data: {
						user_id: this.user_id,
						pageSize: 1,
						currentPage: 1,
						status: 1,
						is_teach_paypal: true,
						type: "voucher_redemption"
					}
				}).then((res) => {
					let content = "" , cancelText = ""
					if(res.data.length !== 0){
						content = "请使用优惠券"
						cancelText = "使用现金"
					}else {
						content = "购买券更优惠"
						cancelText = "取消"
					}
					uni.showModal({
					    title: '购买提示',
					    content: content,
						cancelText: cancelText,
					    success: function (res) {
					        if (res.confirm) {
					            if(content == "请使用优惠券") {
									me.discountFun()
								}else {
									me.activityPurchaseRequest()
								}
					        } else if (res.cancel) {
					           if(cancelText == "使用现金") {
								   uni.login({
										success: (res) => {
											me.quane_gou(res.code)
										}
								   })
							   }else {
								   
							   }
					        }
					    }
					});
				})
			},
			
			lis(){
				if(this.user_id == ""){
					uni.showModal({
					    content: '请先登录',
					    success: function (res) {
					        if (res.confirm) {
					           uni.reLaunch({
					           	   url:'/pages/tabBer/login/logins'
					           })
					        } else if (res.cancel) {
					           uni.showToast({
					           	    title: "已取消",
									icon: "none"
					           })
					        }
					    }
					})
				}else{
					uni.login({
						success: (res) => {
							this.quane_gou(res.code)
						}
					})
				}
			},
		async	quane_gou(code){
				const res = await this.$myRequest({
					url: "/pay/payPre",
					methed: "post",
					header: {
						'content-type': 'application/json'
					},
					data: {
						user_id: this.user_id,
						rcharge_type: "study_card",
						source: "teach_paypal",
						course_num: this.kecheng_num,
						master_id: this.master_id,
						member_duration: 12,
						rcharge_abstract: "微信全额购买",
						studycard_id: this.id,
						study_type: "mechanism_offline",
						is_one_time_payment: false,
						points: 0,
						pay_type: "wx",
						mechanism_id: this.mechanism_id,
						rcharge_valid: code
					}
				})
				if(res.code == 0){
					uni.requestPayment({
					    timeStamp: res.data.timeStamp,
					    nonceStr: res.data.nonceStr,
					    package: res.data.package,
					    signType: 'MD5',
					    paySign: res.data.paySign,
					    success: (res) => {
					        uni.showToast({
					        	title: "微信支付成功"
					        })
							uni.reLaunch({
								url: '/pages/tabBer/newsshouye/newsshouye'
							})
					    },
					    fail: function (err) {
					        console.log('fail:' + JSON.stringify(err));
					    }
					})
				}
			},
			
			img_list_(){
				let obj = []
				obj.push(this.erwei)
				 uni.previewImage({
					 urls: obj
				 })
			},
			
			anzhuo(){
				this.list_toto = true
			},
			
			tiaozhuan(){
				this.list_show_xia = true
			},
			
			gokan(itme,index){
				uni.previewImage({
					urls: itme,
					current: index
				})
			},
			
			goyuyue_list(){
				this.pintuan(this.shuju_kecheng)
			},
			
		async	pintuan(itme){
				const res = await this.$myRequest({
					url: "/userGrouping/insertUserGrouping",
					methed: "post",
					data: {
						user_id: itme.user_id,
						master_set_price_id:itme. studycard_id,
						study_card_id: itme.id
					},
					header: {
						'content-type': 'application/json'
					}
				})
				if(res.code == 0){
					uni.navigateTo({
					   url: "/pages/Friend/creatGroup/creatGroup?num=" + res.data
					})
				}else{
					uni.showToast({
						title: res.message,
						duration: 1000,
						icon: "none"
					})
				}
			},
			
			goyuyue(){
				uni.navigateTo({
					url:'/pages/World/Createstudio/Createstudio?num=' + encodeURIComponent(JSON.stringify(this.shuju_kecheng))
				})
			},
			
			xiaoshi(){
				this.list_show = false
			},
			
			yuelan(index){
				uni.previewImage({
					urls: this.photoData,
					indicator: "number",
					current: index
				})
			},
			
			gojifou(){
				let me = this
				uni.navigateTo({
					url:'/pages/Meet/jigouxiangqing/jigouxiangqing?id=' +  me.mechanism_id
				})
			},
			
				jiaofu_(){
					if(this.user_id == ""){
						uni.showModal({
						    content: '您还未登录请先登录',
						    success: function (res) {
						        if (res.confirm) {
						            uni.reLaunch({
						            	url:"/pages/tabBer/login/logins"
						            })
						        } else if (res.cancel) {
						            
						        }
						    }
						})
					}else{
						this.jiaofu()
					}
				},
				// 单节支付详情
				jiaofu() {
					uni.login({
						success: (res) => {
							this.$myRequest({
								url: "/pay/payPre",
								methed: "post",
								data: {
									user_id: this.user_id,
									source: "teach_paypal",
									rcharge_abstract: "微信小程序单节支付",
									course_num: 1,
									studycard_id: this.id,
									member_duration: 12,
									rcharge_type: "study_card",
									study_type: "mechanism_offline",
									rcharge_valid: res.code,
									type: "single_session_deposit",
									pay_type: "wx",
									title: this.title,
									is_one_time_payment: true
								},
								header: {
									'content-type' : 'application/json'
								}
							}).then((val) => {
								if(val.code == 0){
									uni.requestPayment({
									    timeStamp: val.data.timeStamp,
									    nonceStr: val.data.nonceStr,
									    package: val.data.package,
									    signType: 'MD5',
									    paySign: val.data.paySign,
									    success: (resl) => {
									        uni.showToast({
									        	title: "支付成功"
									        })
									    },
									    fail: function (err) {
									        
									    }
									});
								}
							})
						}
					})
				},
			
			go(){
				uni.navigateBack({
					delta: 1
				})
			},
			
		async	pinglun(){
				const res = await this.$myRequest({
					url: "/masterComment/queryMechanismList",
					data: {
						currentPage: this.currentPage,
						mastersetprice_id: this.id,
						pageSize: 10,
						platform: "wx",
						type: "teach_paypal_course"
					}
				})
				if(res.code == 0){
					if(res.data.length < 10){
						this.ping = 2
					}
					res.data.forEach((itme) => {
						if(itme.photo_url != ""){
							if(itme.photo_url.indexOf(",") != -1){
								itme.photo = itme.photo_url.split(",")
							}else{
								let a = []
								a.push(itme.photo_url)
								itme.photo = a
							}
						}
					})
				}
				if(this.pinglun_list.length == 0){
					this.pinglun_list = res.data
				}else{
					this.pinglun_list = this.pinglun_list.concat(res.data)
				}
			},
				
		async	CourseDetails(id) {
				const res = await this.$myRequest({
					url: "/masterSetPrice/queryCommodityList",
					data: {
						id: id
					}
				})
				if(res.code == 0){
					let data = res.data.list[0]
					if(data.activity_list.indexOf("赋") !== -1){
						this.curriculumType = true
					}else {
						this.curriculumType = false
					}
					if(data.introduction_url.indexOf(",") == -1) {
						this.photoData.push(data.introduction_url)
					}else {
						this.photoData = data.introduction_url.split(",")
					}
					this.img = data.face_url
					this.kecheng_num = data.course_num
					this.title = data.title
					this.lable = data.label
					this.default_discount_price = data.default_discount_price
					this.amout = data.amout
					this.original_price = data.original_price
					this.num = data.pay_num
					
					let title_ = data.titile_url.split("#$*")
					let fictitious = []
					title_.forEach((itme,index) => {
						let internalData = {
							title: "第" + (index + 1) + "课",
							con: itme
						}
						fictitious.push(internalData)
					})
					this.content_list = fictitious
					this.introduction_content = data.introduction_content
					this.jigou_xiang = data.map.masterMechanismEntity
					this.mechanism_id = data.map.masterMechanismEntity.id
					if(data.map.activityEntityList.length > 0){
						let JudgmentField = []
						this.activity_list = data.map.activityEntityList
						data.map.activityEntityList.forEach((it) => {
							if(it.tags == "新春"){
								this.dui_obj = it
								JudgmentField.push(it)
							}
							if(JudgmentField.length != 0){
								this.isxinchun = true
							}
						})
					}
				}
			}	
			
		},
		onLoad(options) {
			try{
				if(uni.getStorageSync('userif_list')){
					this.user_id = uni.getStorageSync('userif_list').user_id
					this.ziji_jigou_id = uni.getStorageSync('userif_list').mechanism_id
				}else{
					this.user_id = ""
				}
			}catch(e){}
			const val =  options.curriculumId
			if(options.curriculumType) {
				this.curriculumType = true
			}
			this.curriculumId = val
			this.id = val
			this.CourseDetails(val)
			// this.detailsList()
		},
		
		onShow() {
			
		},
		
		onReachBottom(){
			if(this.ping == 1){
				this.currentPage++
				this.pinglun()
			}else{
				uni.showToast({
					title: "加载完毕"
				})
			}
		},
	}
</script>
<style lang="scss" scoped>
	.colo_se{
		font-size: 29rpx;
	}
	.colo_yan{
		font-size: 32rpx;
	}
	.list_img{
		width: 37rpx;
		height: 37rpx;
		vertical-align: center;
		position: relative;
		top: 5rpx;
		left: -10rpx;
	}
	.cocc{
		width: 517rpx;
		height: 80rpx;
		background: #FF7300;
		color: #FFFFFF;
		border-radius: 40rpx;
		line-height: 80rpx;
		text-align: center;
		font-size: 28rpx;
	}
	.cocc_{
		width: 250rpx;
		height: 80rpx;
		background: #FF7300;
		color: #FFFFFF;
		border-radius: 40rpx;
		line-height: 80rpx;
		text-align: center;
		font-size: 28rpx;
	}
	.img_huo{
		height: 50rpx;
		width: 150rpx;
	}
	*{
		padding: 0;
		margin: 0;
	}
	.panduan{
		color: #BFBFBF;
		text-decoration:line-through ;
		margin-left: 10rpx;
		position: relative;
		font-size: 26rpx;
		top: 8rpx;
	}
	.zhengchang{
		color:#FF3D3D;
	}
	/deep/::-webkit-scrollbar {
	 display: none;
	 width: 0;
	 height: 0;
	 color: transparent;
	 background: transparent;
	}
	.list{
		font-size: 30.58rpx;
		margin-top: 15rpx;
		background:#F5F5F5;
		padding: 15rpx ;
		border-radius: 18rpx;
		width: 350rpx;
		text-align: center;
	}
</style>
